

<template >

    <div class="common-layout">
        <el-container>
            <el-header>
                <gujia></gujia>
                <Header></Header>
            </el-header>

            <el-container>
                <el-aside width="250px">
                    <Nav></Nav>
                </el-aside>

                <el-main>
                    <Breadcrumb />
                    <div class="scroll-area">
                        <RouterView />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/Header.vue';
import Nav from '@/components/Nav.vue';
import Breadcrumb from '@/components/Breadcrumb/index.vue'
</script>

<style scoped lang="less">
.el-header {
    background: rgb(140, 220, 249);
    height: 70px;
}

.el-aside {
    background-color: #304156;
    height: calc(100vh - 70px);

    &::-webkit-scrollbar {
        width: 0;
    }
}

.el-main {
    background-color: white;
    height: calc(100vh - 70px);

    .scroll-area {
        height: calc(100vh - 150px);
        overflow: auto;

        &::-webkit-scrollbar {
            width: 0;
        }
    }
}
</style>